<template>
  <mu-container class="noPadding">
    <h2>登录示例</h2>
    <mu-form :model="loginForm" ref="loginForm" class="mu-demo-form" label-width="100">
      <mu-form-item prop="username" label="" :rules="usernameRules">
        <mu-text-field v-model="loginForm.username" prop="username"  placeholder="用户名/手机号/邮箱"></mu-text-field>
      </mu-form-item>
      <mu-form-item prop="password" label="" :rules="passwordRules">
        <mu-text-field type="password" v-model="loginForm.password" prop="password" placeholder="请输入密码"
                       :action-icon="visibility ? 'visibility_off' : 'visibility'"
                       :action-click="() => (visibility = !visibility)"
                       :type="visibility ? 'text' : 'password'"></mu-text-field>
      </mu-form-item>
      <mu-form-item>
        <mu-button color="primary" @click="submit">登录</mu-button>
        <mu-button @click="clear">取消</mu-button>
      </mu-form-item>
    </mu-form>
  </mu-container>
</template>

<script>
  //import API from '../api/api_user'
  import Home from "../pages/Home";
    export default {
        name: "Login",
        data () {
          return {
            loading:false,
            usernameRules:[
              { validate: (val) => !!val, message: '用户名不能为空'},
              { validate: (val) => val.length >= 3, message: '用户名长度大于3'}
            ],
            passwordRules: [
              { validate: (val) => !!val, message: '密码不能为空'},
              { validate: (val) => val.length >= 3 && val.length <= 10, message: '密码长度大于3小于10'}
            ],
            loginForm: {
              username: '',
              password: '',
            },
            visibility:false
          }
        },
      methods: {
        submit () {
          let that = this
          this.$refs.loginForm.validate().then((valid) => {
            if(valid){
              that.loading = true
              let LoginParams = {
                account:that.loginForm.username,
                password:that.loginForm.password
              }
                this.$router.push('/home')

             console.log('登录成功')

             /* API.login(LoginParams).then(function (result) {
                console.log(result)
                return
                    that.loading = false
                  if(result && result.code === 200){
                    console.log(result)

                  }else{
                   /!* that.$message.error({
                      showClose:true,
                      message:result.msg || '登录失败',
                      duration:2000
                    })*!/
                    console.log('登录失败')
                  }
              },function(err){
                that.loading = false;
                /!*that.$message.error({
                  showClose: true,
                  message: err.toString(),
                  duration: 2000
                });*!/
                console.log(err)
                console.log('登录失败')
              })*/
            }
          }).catch(function (error) {
            that.loading = false;
            console.log(error);
           /* that.$message.error({
              showClose: true,
              message: "请求出现异常",
              duration: 2000
            });*/
            console.log('登录失败')
          });
        },
        clear () {
          this.$refs.loginForm.clear();
          this.loginForm = {
            username: '',
            password: '',
          };
        }
      }
    }
</script>

<style scoped>
  .mu-demo-form {
    width: 100%;
    max-width: 460px;
    padding: 50px 40px;
    margin: 0 auto;
  }
</style>
